<ng-template #emptyWishllist>
  <div class="d-flex justify-content-center" *ngIf="isLoading; else noData">
    <mat-spinner></mat-spinner>
  </div>
  <ng-template #noData>
    <ng-container *ngIf="!isLoading">
      <mat-card>
        <mat-card-header>
          <mat-card-title class="mat-h1"
            >Your wishlist is empty.</mat-card-title
          >
        </mat-card-header>
        <mat-card-content>
          <button
            mat-raised-button
            color="primary"
            [routerLink]="['/']"
            class="mt-2"
          >
            Continue shopping
          </button>
        </mat-card-content>
      </mat-card>
    </ng-container>
  </ng-template>
</ng-template>

<ng-container *ngIf="wishlistItems$ | async as wishlistItems">
  <mat-card class="my-4">
    <mat-card-header
      class="mat-elevation-z2 custom-card-header justify-content-between"
    >
      <mat-card-title class="mat-h1"> My wishlist </mat-card-title>
      <div *ngIf="wishlistItems?.length > 0">
        <button
          class="mat-elevation-z4"
          mat-raised-button
          (click)="clearWishlist()"
        >
          Clear Wishlist
        </button>
      </div>
    </mat-card-header>
    <ng-container *ngIf="wishlistItems?.length > 0; else emptyWishllist">
      <mat-card-content class="my-3">
        <table mat-table [dataSource]="wishlistItems" class="mat-elevation-z2">
          <ng-container matColumnDef="image">
            <th mat-header-cell *matHeaderCellDef>Image</th>
            <td mat-cell *matCellDef="let item">
              <img
                class="my-2"
                matTooltip="{{ item.title }}"
                matTooltipPosition="after"
                src="/Upload/{{ item.coverFileName }}"
              />
            </td>
          </ng-container>

          <ng-container matColumnDef="title">
            <th mat-header-cell *matHeaderCellDef>Title</th>
            <td mat-cell *matCellDef="let item">
              <a [routerLink]="['/books/details/', item.bookId]">{{
                item.title
              }}</a>
            </td>
          </ng-container>

          <ng-container matColumnDef="price">
            <th mat-header-cell *matHeaderCellDef>Price</th>
            <td mat-cell *matCellDef="let item">
              {{ item.price | currency : "INR" }}
            </td>
          </ng-container>

          <ng-container matColumnDef="cart">
            <th mat-header-cell *matHeaderCellDef>Cart</th>
            <td mat-cell *matCellDef="let item">
              <app-addtocart [bookId]="item.bookId"></app-addtocart>
            </td>
          </ng-container>

          <ng-container matColumnDef="wishlist">
            <th mat-header-cell *matHeaderCellDef>Wishlist</th>
            <td mat-cell *matCellDef="let item">
              <app-addtowishlist
                [bookId]="item.bookId"
                [showButton]="true"
              ></app-addtowishlist>
            </td>
          </ng-container>

          <tr mat-header-row *matHeaderRowDef="displayedColumns"></tr>
          <tr mat-row *matRowDef="let row; columns: displayedColumns"></tr>
        </table>
      </mat-card-content>
    </ng-container>
  </mat-card>
</ng-container>
